<template>
  <div class="refund-reject-dialog">
    <el-badge :value="total" class="badge">
      <el-button type="primary" size="medium" @click="show">异常工单</el-button>
    </el-badge>

    <abnormalWorkOrderDialog ref="abnormalWorkOrderDialog" @productionSelect="productionSelect" :warehouseId="warehouseId">
    </abnormalWorkOrderDialog>
  </div>
</template>

<script>
import abnormalWorkOrderDialog from './abnormalWorkOrderDialog'
import { getNotReadOrderNewsLog } from '@/api/shop'
export default {
  props: {
    warehouseId: {
    },
  },
  data() {
    return {
      total: 0
    };
  },
  methods: {
    show() {
      this.$refs.abnormalWorkOrderDialog.show()
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getTotalRecord()
      }, 30 * 1000)
    },
    getTotalRecord() {
      const params = this.getParams()
      getNotReadOrderNewsLog(params).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data.total || 0
        } else {
          this.total = 0
        }
      })
    },
    getParams() {
      return {
        cityId: JSON.parse(window.localStorage.getItem("saber-areaId")).content,
        productionProcess: '6',
        category: '0',
        page: 1,
        size: 10,
        warehouseId: this.warehouseId,
        newsType: '3,4',
      }
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
      this.timer = null
    },
    productionSelect() {
      this.getTotalRecord()
    }
  },
  created() {
    this.setTimer()
    this.getTotalRecord()
  },
  beforeDestroy() {
    this.clearTimer()
  },
  components: {
    abnormalWorkOrderDialog
  }
};
</script>
<style lang="scss" scoped>
.refund-reject-dialog {
  .badge {
    vertical-align: top;
  }
}
</style>